<!-- 个人中心 -->
<template>
	<view>
		<view class="shang">
			<view style="display: flex;">
				<view style="margin-left: 40rpx;">
					<view class="jin">购物金余额(元）</view>
					<view class="qian">{{gouwujin.toFixed(2)}}</view>
				</view>
				<view class="chongzhi" @click="handleToCz">
					<view class="cz">充值</view>
				</view>
			</view>
		</view>
		<view style="margin-left: 48rpx;margin-top: 10rpx;">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item" :class="index==TabCur?'tabcolor cur':''" v-for="(item,index) in list1"
						:key="index" @tap="tabSelect" :data-id="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="TabCur==0">
			<view class="boxitem" v-for="item in moneyInfo" :key="item.id">
				<view style="display:flex;margin-top:36rpx">
					<view class="title">{{item.memo}}</view>
					<view class="mo">+{{item.amount}}</view>
				</view>
				<view style="display:flex;margin-top:20rpx">
					<view class="time">{{item.createtime_text}}</view>
					<view style="display:flex;" class="content">
						<view>赠送</view>
						<view style="color:#FF6121">{{item.daijin_money}}元</view>
						<view>代金券</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="TabCur==1">
			<view class="boxitem" v-for="item in moneyInfo" :key="item.id">
				<view style="display:flex;margin-top:36rpx">
					<view>
						<view class="ddtitle">{{item.memo}}</view>
						<view class="ddtime">{{item.createtime_text}}</view>
					</view>
					<view class="ddmo">-{{item.amount}}</view>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				list1: [{
					name: '充值明细',
					type: "0"
				}, {
					name: '消费明细',
					type: "1"
				}],
				TabCur: 0,
				scrollLeft: 0,
				gouwujin: 0,
				page: 1,
				moneyInfo: []
			};
		},
		onLoad() {},
		onShow() {
			console.log(565656)
			this.moneyInfo = []
			this.page = 1
			this.init()
		},
		onReachBottom() {
			console.log('已触底');
			this.page++
			this.init()
		},
		methods: {
			init() {
				let data = {
					page: this.page,
					type: this.TabCur + 1
				}
				this.$https('my.gouwujin', data).then(res => {
					this.gouwujin = res.data.amount
					let datalist = res.data.data
					this.moneyInfo = [...this.moneyInfo, ...datalist]
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.moneyInfo = []
				this.page = 1
				this.init()
			},
			handleToCz() {
				uni.navigateTo({
					url: `/pages/index/recharge`
				});
			}
		},
	}
</script>
<style>
	page {
		height: 100%;
		background: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	.personal-wrap {
		padding-bottom: 100rpx;
	}

	.br {
		border: 1px solid #F3F3F3;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}


	.shang {
		width: 702rpx;
		height: 226rpx;
		background-image: url('/static/images/Group 2254.png');
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
		background-size: cover;
	}

	.chongzhi {
		width: 148rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		position: absolute;
		right: 40rpx;
		top: 80rpx;
		text-align: center;
	}

	.jin {
		// width: 162px;
		// height: 24px;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		// line-height: 38px;
		margin-top: 40rpx;

	}

	.qian {
		// width: 174px;
		// height: 30px;
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		// line-height: 38px;
		margin-top: 20rpx;

	}

	.cz {
		font-size: 30rpx;
		font-weight: 500;
		color: #FC5351;
		line-height: 68rpx;

	}

	.tabcolor {
		color: #000000;
	}

	.cu-item.cur {
		border-bottom: 4rpx solid #FD5755;
	}

	.boxitem {
		margin-top: 20rpx;
		border-top: 1px solid #F8F8F8;
		margin-left: 24rpx;
		margin-right: 24rpx;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}

	.mo {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF6121;
		line-height: 38rpx;
		position: absolute;
		right: 24rpx;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}

	.content {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
		position: absolute;
		right: 24rpx;
	}

	.ddtitle {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.ddtime {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
		margin-top: 20rpx;
	}

	.ddmo {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #00801C;
		line-height: 38rpx;
		position: absolute;
		right: 24rpx;
		top: 124rrpx;
	}
</style>
